@import "./minxin";
.socket{
    height: 1020px;
    position: relative;
    .socket_background{
        width: 100%;
        height: 850px;
        margin-bottom: 60px;
        position: absolute;
        top: 175px;
        background-color: rgb(243, 249, 251);
    }
    .socket_banxin{
        @include banxin();
        // 上边标题
        .socket_top{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .socket_top_lef{
                font-size: 20px;

            }
            .socket_top_rig{
                cursor: pointer;
                display: flex;
                align-items: center;
                font-size: 14px;
                span{
                    margin-right: 10px;
                }
                
                img{
                    width: 16px;
                    height: 16px;
                }
            }
        }
        // 内容
        .socket_info{
            @include banxin();
            top: 50px;
            position: absolute;
            // 相对定位盒子
            .socket_info_box{
                display: flex;
                flex-wrap: wrap;
                // 每个商品盒子
                .socket_info_box_item{
                    border-radius: 20px ;
                    overflow: hidden;
                    position: relative;
                    cursor: pointer;
                    margin-right: 15px;
                    background-color: white;
                    height: 280px;
                    // 商品照片
                    img{
                        height: 200px;
                    }
                    // 右上角小图标
                    .socket_info_box_pic{
                        position: absolute;
                        top: 15px;
                        right: 5px;
                        width: 42px;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        img{
                            width: 40px;
                            height: 40px;
                        }
                    }
                    // 商品介绍-金额   盒子
                    .socket_info_box_details{
                        margin-top: 15px;
                        display: flex;
                        justify-content: space-between;
                        padding: 0 20px;
                        // 商品介绍
                        .info_box_details_lef{
                            display: flex;
                            flex-direction: column;
                            h3{
                                height: 20px;
                                font-size: 16px;
                                line-height: 24px;
                                color: #000;
                                margin-bottom: 4px;
                            }
                            span{
                                font-size: 12px;
                                color: grey;
                            }
                        }
                        // 商品价格
                        .info_box_details_rig{
                            display: flex;
                            align-items: center;
                            color: red;
                            h3{
                                font-size: 14px;
                            }
                            strong{
                                font-size: 20px;
                                font-weight: 600;
                            }
                        }
                    }
                }
                // 第二个盒子
                .socket_info_box_item2{
                    height: 559px;
                    img{
                        height: 480px;
                    }
                }
                // 第三个盒子
                .socket_info_box_item3{
                    height: 280px;
                    margin: 0;
                    img{
                        height: 200px;
                    }
                }
                // 第四个盒子
                .socket_info_box_item4{
                    height: 559px;
                    top: 330px;
                    left: 0;
                    position: absolute;
                    img{
                        height: 480px;
                    }
                }
                // 第五个盒子
                .socket_info_box_item5{
                    top: 609px;
                    left: 405px;
                    position: absolute;
                    height: 280px;
                }
                // 第六个盒子
                .socket_info_box_item6{
                    height: 559px;
                    top: 330px;
                    left: 810px;
                    position: absolute;
                    img{
                        height: 480px;
                    }
                }
                // 滑动效果
                .socket_info_box_item:hover{
                    box-shadow: 5px 13px 26px rgb(0 0 0 / 20%);
                    transition: all .3s;
                }
            }
        }
    }
}